<template>
  <div class="app-container" v-loading="loading">
    <el-row :gutter="10">
      <el-col :span="19">
        <template-apply-base  :detail-info="detailInfo" :view-type="1"></template-apply-base>

        <template-apply-old-template v-if="detailInfo.source==1" :detail-info="detailInfo"></template-apply-old-template>

        <contract-template-update  :detail-info="detailInfo" @managerCustomer="managerCustomer"></contract-template-update>
      </el-col>
      <el-col :span="5">
        <flow-record v-if="detailInfo.flowId" :id="detailInfo.flowId" :custom-style="customerStyle"></flow-record>
        <operation-record :logs="detailInfo.logs"></operation-record>
      </el-col>
    </el-row>

    <div class="card-wrap flex justify-end card-padding">
      <el-button @click="back">返回</el-button>
    </div>
    <manager-customer v-if="detailInfo.approvalStatus==2 && (detailInfo.applicationType==3||detailInfo.applicationType==4)" ref="managerCustomer" :view-type="2" @success="getDetail"></manager-customer>
  </div>
</template>

<script>
import TemplateApplyBase from "@/views/contractTemplate/components/templateApply/templateApplyBase.vue";
import TemplateApplyOldTemplate from "@/views/contractTemplate/components/templateApply/templateApplyOldTemplate.vue";
import ContractTemplateUpdate from "@/views/contractTemplate/components/templateApply/contractTemplateUpdate.vue";
import {templateApplyDetails, getFlowRecord} from "@/api/contractTemplate/templateUpdate";
import OtherTemplateApprovalInfo from "@/views/contractTemplate/otherTemplate/components/OtherTemplateApprovalInfo.vue";
import OperationRecord from "@/views/contractTemplate/components/OperationRecord.vue";
import ManagerCustomer from "@/views/contractTemplate/components/ManagerCustomer.vue";

export default {
  components: {ManagerCustomer, OperationRecord, OtherTemplateApprovalInfo, ContractTemplateUpdate, TemplateApplyOldTemplate, TemplateApplyBase},
  props: {},
  data() {
    return {
      customerStyle: 'margin:0 0 20px',
      loading: false,
      detailInfo: {
        orderDetails: null
      },
      flowList: [],
      logs: []
    }
  },
  computed: {},
  methods: {
    getDetail() {
      this.loading = true
      templateApplyDetails(this.$route.query.id).then(res => {
        this.detailInfo = res.data
        let contractTemplate = this.detailInfo?.contractTemplate;
        if (contractTemplate?.overdueRulesParam) {
          if (contractTemplate?.overdueRulesType == 1) {
            this.$set(contractTemplate, 'overdueRulesParam1', contractTemplate.overdueRulesParam)
          } else if (contractTemplate.overdueRulesType == 2) {
            this.$set(contractTemplate, 'overdueRulesParam2', contractTemplate.overdueRulesParam)
          }
        }
        if (contractTemplate?.earlyReturnRules && contractTemplate?.earlyReturnRules.length > 0) {
          contractTemplate.earlyReturnRules = contractTemplate.earlyReturnRules.map(item => {
            this.$set(item, 'leaseTerm', [item.minLeaseTerm, item.maxLeaseTerm])
            return item
          })
        }
        if (this.form.approvalStatus != 0) {
          this.getFlowRecord()
        }
      }).finally((f) => {
        this.loading = false
      })
    },
    //获取审批进度
    getFlowRecord() {
      getFlowRecord(this.$route.query.id).then(res => {
        this.flowList = res.data;
      })
    },
    //管理客户
    managerCustomer(){
      const customerIds = this.detailInfo.contractTemplate.customerIds?.split(',')
      this.$refs.managerCustomer.show(this.detailInfo.id, this.detailInfo.newTemplateId, customerIds)
    },
    back() {
      this.$router.back()
      this.$store.dispatch('tagsView/delView', this.$route)
    }
  },
  created() {
    if (this.$route.query.id) {
      this.getDetail()
    }

  },

}
</script>

<style lang="scss" scoped>

</style>
